<template>
 <div style="height: 100%;" class="user-profile">
    <van-nav-bar title="修改个人信息" left-arrow @click-left="onBack" />
    <van-form :model="form" ref="form" label-position="left" :label-width="80">
      <div class="head"> <van-uploader class="avatar" v-model="filePic" multiple :max-count="1" :after-read="afterRead" /> </div>
      <van-field :rules="nickname" v-model="form.nickname" label="昵称"></van-field>
      <van-field :rules="email" v-model="form.email" label="邮箱" type="email"></van-field>
      <van-field :rules="phone" v-model="form.phone" label="手机号" type="tel"></van-field>
      <van-field :rules="pwd" v-model="form.pwd" label="密码" type="password"></van-field>
      <van-button type="primary" block @click="onSubmit">提交</van-button>
    </van-form>
  </div>
</template>

<script>
import myaxios from '@/http/MyAxios';
import httpApi from '@/http';
export default {
  data() {
    return {
      avatar: [
        {
          required: true,
          message: '头像为必填项',
          trigger: 'onBlur'
        }
      ],
      nickname: [
        {
          required: true,
          message: '昵称为必填项',
          trigger: 'onBlur'
        }
      ],
      email: [
        {
          validator: value => {
            return /^\w+@[0-9a-zA-Z]+\.[a-zA-Z]+/.test(value)
          },
          message: '请输入正确的邮箱格式',
          trigger: 'onBlur'
        }
      ],
      phone: [
        {
          validator: value => {
            return /^1[3-9]\d{9}$/.test(value)
          },
          message: '请输入正确的手机号码',
          trigger: 'onBlur'
        }
      ],
      pwd: [
        {
          validator: value => {
            return /^\w{6,15}$/.test(value)
          },
          message: '请输入6-15个字符',
          trigger: 'onBlur'
        }
      ],
      form: {
        user:'',
        nickname: '',
        email: '',
        phone: '',
        avatar:'',
        pwd:''
      },
      filePic:[]
    }
  },
  methods: {
     // 用户上传头像
     afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log('头像:',file);
      var form = new FormData()
      form.append('avatar', file.file)
      //使用post上传，由于在vue使用post上传表单数据记得更改header
      myaxios.post1(form).then(res => {
        // console.log(res);
        this.form.avatar = res.data.data
      })
    },
    onBack() {
      this.$router.back()
    },
    onSubmit() {
      console.log('点击了按钮');
      this.form.user=this.$store.state.user.username
      this.$refs.form.validate().then(() => {
        this.$toast.success('用户信息修改成功,请重新登录')
        console.log(this.form);
          httpApi.userApi.user_update(this.form).then(res=>{
            console.log(res);
          })
          this.$router.push('/login')
      }).catch(() => {
      
      })
    }
  },
  mounted(){

    //从vuex的state中拿到用户个人信息
    this.form.nickname=this.$store.state.user.nickname
    this.form.email=this.$store.state.user.email
    this.form.phone=this.$store.state.user.phone


  }
}
</script>

<style lang="scss" scoped>
.user-profile{
  color: red !important;
  height: 100vh !important;
}
.van-form{
  .head{
    position: relative;
    height: 80px;
    .avatar{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>